import { IFormConfig, IFormData, IFormItemConfig, IJlFormInstance } from '@jl/element-plus';
import { ref } from 'vue';

export function create() {
  const filedStatus = {
    projectCodeRepetition: false,
    projectNameRepetition: false,
  };
  const formRef = ref<IJlFormInstance>();
  const formConfig: IFormConfig = { gutter: 24, labelWidth: 90 };
  const formData = ref<IFormData>({
    projectCode: '',
    projectName: '',
    projectId: '',
    organizeName: '',
    province: '',
    city: '',
    district: '',
    address: [],
  });

  const validatorAddress = (rule: any, value: any, callback: any) => {
    if (value && value.length !== 3) {
      callback(new Error('请选择省/市/区'));
    } else {
      callback();
    }
  };
  const validatorCode = (rule: any, value: any, callback: any) => {
    // 正则表达式，匹配由英文、数字和特殊字符组成的字符串，长度20以内
    const pattern = /^[A-Za-z0-9!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]{1,20}$/;
    if (value === '' || (value && !pattern.test(value))) {
      callback(new Error('请输入由英文、数字、特殊字符组成，长度在20以内'));
    } else if (filedStatus.projectCodeRepetition) {
      callback('存在同名的项目编号');
    } else {
      callback();
    }
  };

  const validatorName = (rule: any, value: any, callback: any) => {
    // 正则表达式，匹配由英文、数字和特殊字、汉字符组成的字符串，长度50以内
    const pattern = /^[A-Za-z0-9!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?\u4e00-\u9fa5]{1,50}$/;
    if (value === '' || (value && !pattern.test(value))) {
      callback(new Error('请输入由英文、数字、特殊字符组成，长度在50以内'));
    } else if (filedStatus.projectNameRepetition) {
      callback('存在同名的项目名称');
    } else {
      callback();
    }
  };

  const validatorOrganize = (rule: any, value: any, callback: any) => {
    if (value) {
      if (value.length > 50) {
        callback(new Error('超出长度'));
      } else {
        callback();
      }
    } else {
      callback(new Error('请输入企业名称'));
    }
  };

  const formItemConfig = ref<IFormItemConfig>([
    {
      type: 'input',
      key: 'projectCode',
      label: '项目编码',
      span: 24,
      maxLength: '20',
      placeholder: '请输入',
      emits: new Set(['change']),
      rules: [
        {
          required: true,
          // message: '请输入项目编码',
          validator: validatorCode,
        },
      ],
    },
    {
      type: 'input',
      key: 'projectName',
      label: '项目名称',
      maxLength: '50',
      span: 24,
      placeholder: '请选择',
      emits: new Set(['change']),
      rules: [
        {
          required: true,
          // message: '请输入项目名称',
          validator: validatorName,
        },
      ],
    },
    {
      type: 'slot',
      slotName: 'slotOrganize',
      key: 'organizeName',
      maxLength: '50',
      label: '企业名称',
      span: 24,
      rules: [
        {
          required: true,
          message: '不能为空',
          // validator: validatorOrganize,
        },
      ],
    },
    {
      type: 'slot',
      slotName: 'slotAddress',
      key: 'address',
      label: '省/市/区',
      span: 24,
      rules: [
        {
          required: true,
          validator: validatorAddress,
          trigger: 'change',
        },
      ],
    },
  ]);

  return {
    filedStatus,
    formRef,
    formConfig,
    formData,
    formItemConfig,
  };
}
